@(qcmForm: Form[Qcm], qcm: Qcm, allThemes: List[Theme])
@import helper._


@main("Associer les questions aux QCM"){
@header()
<script type="text/javascript">

$(document).ready(function(){
	
	// SET Onchange function for themes
	$('#theme').on('change',function(){
		updateSelectBox('theme','matiere','http://localhost:9000/newqcm/server/listeMatiere/');
	});
	
	// SET Onchange function for matieres
	$('#matiere').on('change',function(){
		updateSelectBox('matiere','chapitre','http://localhost:9000/newqcm/server/listeChapitre/');
	});
	
	// SET Onchange function for question
	$('#chapitre').on('change',function(){
		updateQuestion('chapitre','box1View','http://localhost:9000/newqcm/server/listeQuestion/');
	});
	
	$('#box1View').on('change',function(){
		commentaire('box1View','info','http://localhost:9000/newqcm/server/commentaireQuestion/');
	});
	
	$('#listeQuestions').on('change',function(){
		commentaire('listeQuestions','info','http://localhost:9000/newqcm/server/commentaireQuestion/');
	});

	$('#actione').on('click',function(){
		getSelectedValue('listeQuestions');
	});

});

function getSelectedValue(selectId){
	var values = new Array();
	var elmt = document.getElementById(selectId);
	console.log("element ="+elmt);
	for(var i=0; i< elmt.options.length; i++){
		console.log(elmt.options.length);
		html += elmt.options[i].value+';';
		console.log(elmt.options[i]);
		console.log(elmt.options[i].value);
		}
	var field = document.createElement("input");
	field.name="boxRecup";
	field.id ="boxRecup";
	console.log(boxRecup);
}

$(function() {
    $.configureBoxes();
});


function commentaire(sourceId,destId,url){
	
	//INIT 
	var html="";
	
	//GET Value
	var selectedValue = $('#'+sourceId+' option:selected').val();
	
	// SEND request
	$.get(url+selectedValue, function(data) {
			
		// FIRST Split
		var tabTemp = data.split(';');
		
			// SECOND Split
		var optionTab = tabTemp[3].split('#');
		

	html += '<table class="table table-bordered">'+
		'<caption>Information sur la question selectionn&eacute;e</caption>'+
		'<thead>'+
		 '   <tr>'+
		  '    <th>Libelle</th>'+
		   '   <th>Niveau</th>'+
		    '</tr>'+
		  '</thead>'+
		  '<tbody>'+
		   ' <tr>'+
		    '  <td>'+tabTemp[0]+'</td>'+
		     ' <td>'+tabTemp[2]+'</td>'+
		     '</tr></tbody>'+'</table>';
		     if (tabTemp[1]!="null"){
		     html +='<table class="table table-bordered">'+
		     '<thead>'+
			 '   <tr>'+
			   '   <th>Commentaire</th>'+
			    '</tr>'+
			  '</thead>'+
			  '<tbody>'+
			  ' <tr>'+
			    '  <td>'+tabTemp[1]+'</td>'+
			    '</tr></tbody>'+'</table>';
		     }
		     
		     html +='<table class="table table-striped">'+
		     '<thead>'+
			 '   <tr>'+
			   '   <th>Choix</th>'+
			   '   <th>R&eacute;ponse</th>'+
			    '</tr>'+
			  '</thead>'+
			  '<tbody>';
		     for(i=0;i<optionTab.length;i=i+2){			
					// ADD to html
					html += '<tr><td>'+optionTab[i]+'</td><td>'+optionTab[i+1]+'</td></tr>';
				}	
		     html += '</tbody>'+'</table>';

		// SET New content
		$('#'+destId).html(html);
		$('#'+destId).show("slow")
		
	});
}

function updateQuestion(sourceId,destId,url){
	//INIT 
	var html="";
	$('#box1View').html("");
	$('#info').html("");
	
	//GET Value
	var selectedValue = $('#'+sourceId+' option:selected').val();
	
	// SEND request
	$.get(url+selectedValue, function(data) {
		
		// FIRST Split
		var tabTemp = data.split(';');
		
		// BROWSE Theme
		for(i=0;i<tabTemp.length;i++){
			
			// SECOND Split
			var optionTab = tabTemp[i].split('#');
			
			// ADD to html
			//TODO : value le mettre de maniere unique id matiere+idChapitre 
			html += '<option value="'+optionTab[0]+'">'+optionTab[1]+'</option>';
			
		}
		
		// SET New content
		$('#'+destId).html(html);
	
	});
}



function updateSelectBox(sourceId,destId,url){
	
	// INIT
	var html = '<option selected="selected" >Choissez dans la liste</option>';
	$('#box1View').html("");
	$('#info').html("");
	
	// GET Value
	var selectedValue = $('#'+sourceId+' option:selected').val();
	if (sourceId == "theme"){$('#chapitre').html(html);}
	
	// SEND request
	$.get(url+selectedValue, function(data) {
		
		// FIRST Split
		var tabTemp = data.split(';');
		
		// BROWSE Theme
		for(i=0;i<tabTemp.length;i++){
			
			// SECOND Split
			var optionTab = tabTemp[i].split('#');
			
			// ADD to html
			html += '<option value="'+optionTab[0]+'">'+optionTab[1]+'</option>';
			
		}
		
		// SET New content
		$('#'+destId).html(html);
	
	});
	
}

$(function(){
    $("form").on("submit", function(){
    	var nombreOption = document.getElementById("listeQuestions").length;
    	var floatN =parseInt(nombreOption);
    	if (floatN == 0) {
    		$("div.listeQuestion").addClass("error");
            $("div.alertListeQuestion").show("slow").delay(3500).hide("slow");
            return false;
    	}
    });
  });

</script>



@helper.form(action = routes.CreateQCM.submit(2)) {
	
	<fieldset>
	<div class="bs-docs-example" >
	<div class="bs-docs-example-after" >
		Etape 2 sur 4
		</div>	
	
		<legend>QCM : Information g&eacute;n&eacute;ral</legend>	
					<div>
					<label>Libell&eacute; : </label>
					<INPUT type="text" name="libelle" value="@qcmForm("libelle").value" disabled="disabled">
					</div>
					
					<div class="row">
					<div class="span6">
				   <label>Date d'ouverture du Qcm : </label>
				    <INPUT type="text" name="libelle" value="@qcm.getDateOuverture().format("dd/MM/yyyy HH:mm")" disabled="disabled">
				    </div>
				    <div class="span6">
				    <label>Date de cloture du Qcm : </label>
				    <INPUT type="text" name="libelle" value="@qcm.getDateCloture().format("dd/MM/yyyy HH:mm")" disabled="disabled">
 		
				 	</div>
				 	</div>
		
		
		
			<legend>Ajouter des Question</legend>
				<label>Theme : </label>
					<select name="theme" id ="theme">
					<option selected="selected" >Choissez dans la liste</option>
					@for(theme <- allThemes){
					<option  value=@theme.getIdTheme()>@theme.getLibelleT()</option>
					}
					</select>
				
				<label>Matiere : </label>
					<select name="matiere" id="matiere">
					<option selected="selected" ></option>
				</select>
				
				<label>Chapitre : </label>
					<select id="chapitre" name="chapitre" >
					<option selected="selected"></option>
				</select>
				
				<label>Question : </label>
					<div class="container-fluid">				                   
					   <table>
					           <tr>
					               <td>
					               <div class="control-group">
									  <label class="control-label" for="inputIcon">Filter</label>
									  <div class="controls">
									    <div class="input-prepend">
									      <span class="add-on"><i class="icon-filter"></i></span>
									      <input type="text" id="box1Filter"/>
									    </div>
									  </div>
									</div>
					                      
					                       <select id="box1View" multiple="multiple" style="height:300px;width:400px;">
					                           <option selected="selected"></option>
					                       </select><br/>
					                        <span id="box1Counter" class="countLabel"></span>
					                      <select id="box1Storage">
					                       </select>
					               </td>
					              <td>
									<i id="to1" class="icon-chevron-left"></i>
					               <i id="to2" class="icon-chevron-right"></i>
					               </td>
					               <td>
					                <i id="allTo1" class="icon-backward"></i>
					               <i id="allTo2" class="icon-forward"></i>
					               </td>
					               
					               <td>
					               
					               <div class="control-group">
									  <label class="control-label" for="inputIcon">Filter</label>
									  <div class="controls">
									    <div class="input-prepend">
									      <span class="add-on"><i class="icon-filter"></i></span>
									      <input type="text" id="box2Filter" />
									    </div>
									  </div>
									</div>

					                 <div class="listeQuestion control-group ">
										      <div class="controls">
										        <select name="listeQuestions[]"  id="listeQuestions"  multiple="multiple" style="height:300px;width:400px;">
													@for(question <- qcm.getListeQuestions()){
														<option  value=@question.getIdQuestion()>@question.getLibelleQuestion()</option>
													}
												</select><br/>
										        <div class="alertListeQuestion alert alert-error hide">
										          <h4 class="alert-heading">Erreur !</h4>
										          Choissez des questions gr&acircce aux listes d&eacuteroulante </div>
										      </div>
										</div>				                   
					                   <span id="box2Counter" class="countLabel"></span>
					                   
					                   </select>
					               </td>
					               
					           </tr>
					       </table>
					       <a class="btn btn-medium" href="@routes.CreateQuestion.createQuestionViaQcmInitialisation()" ><i class=" icon-plus"></i> Cr&eacute;er une question</a>
					       <p></p>
					 		<div class="hide" id="info" ></div>
					     </div>
					     
</div>	
</fieldset>

 <div class="actions"> 	
     	<button id="action" type="submit" name="action" value="retour" class="btn btn-primary">
			Retour <i class="icon-white icon-circle-arrow-left"></i> 
		</button>
		
       	<button id="action" type="submit" name="action" value="valider"class="btn btn-primary">
			Valider <i class="icon-white icon-circle-arrow-right"></i>
		</button>
</div>
}
}
